<template>
    <div  class="detail-rate">
        <div v-if="Object.keys(rateInfo).length>0">
            <div class="rate-nav">
                
                <span>用户评价（{{cRate}}条）</span>
                <a href="javascript:;">更多</a>
            </div>
            <div class="user-info">
                <a :href="rateInfo.user.profileUrl"><img :src="rateInfo.user.avatar" alt=""></a>
                <span>{{rateInfo.user.uname}}</span>
            </div>
            <div class="rate-content">
                <span>{{rateInfo.content}}</span>
            </div>
            <div class="shop-info">
                <span>{{rateTime}}</span>
                <span>{{rateInfo.style}}</span>
            </div>
            <div class="shop-img" v-if="rateInfo.images">
                <img :src="item" v-for="(item,key) in rateInfo.images" :key="key" alt="">
            </div>
            <div class="explain">
                <span>{{rateInfo.explain}}</span>
            </div>
        </div>
        <div v-else>
            <span>暂无评论</span>
        </div>
    </div>
</template>

<script>
    export default {
        props:{
            rateInfo:{
                type:Object,
                default(){
                    return {}
                }
            },
            cRate:{
                type:Number,
                default:0
            }
        },
        computed:{
            rateTime(){
                const date = new Date(this.rateInfo.created*1000)
                return date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日' 
            }
        }
    }
</script>

<style scoped>
    .detail-rate{
        padding: 10px 8px;
        border-top: 4px solid rgba(100, 100, 100, .1);
        border-bottom: 4px solid rgba(100, 100, 100, .1);
        width: 100vw;
        font-size: .9rem;
        margin-bottom: 20px;
    }
    .rate-nav{
        display: flex;
        justify-content: space-between;
       
        padding: 10px 0;
    }
    .user-info{
        display: flex;
        align-items:center;
    }
    .user-info img{
        width: 3rem;
        height: 3rem;
        border-radius: 1.5rem;
        margin-right: 10px;
    }
    .rate-content{
        padding: 10px 0;
        color: #323232;
    }
    .shop-info{
        padding: 10px 0;
    }
    .shop-info>span{
        display: inline-block;
        font-size: .8rem;
        padding-right: 15px;
    }
    .shop-img{
        display: flex;
        margin: 10px 0;
    }
    .shop-img img{
        width: 4rem;
        height: 4rem;
        overflow: hidden;
    }
    .explain{
        font-size:.8rem;
    }
    
</style>